<template>
    <div class='order'>
        <div class="container">
            <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" class="search-con">
                <el-col :span="24" style="margin-bottom: 20px;">
                    <el-form-item>
                        <el-button size="mini" v-for="item, index in btnList" :key="index" @click="changeTab(item, index)"
                            :type="curLine == index ? 'primary' : 'default'">
                            {{ item.dictLabel }}</el-button>
                        <!-- ({{ item.orderNum }}) -->
                    </el-form-item>
                </el-col>
                <!-- <el-form-item label="订单类型" prop="key_order_type" style="margin-right:25px;">
                    <el-select v-model="queryParams.key_order_type" placeholder="请选择" clearable size="small">
                        <el-option v-for="dict in statusList" :key="dict.dictValue" :label="dict.dictLabel"
                            :value="dict.dictValue" />
                    </el-select>
                </el-form-item> -->
                <el-form-item label="输入搜索：" prop="key_order_no" style="margin-right:50px;">
                    <el-input v-model="queryParams.key_order_no" placeholder="订单号" clearable size="small" />
                </el-form-item>
                <!-- <el-form-item label="收货人：" prop="key" style="margin-right:25px;">
                    <el-input v-model="queryParams.key" placeholder="收货人姓名/手机号码" clearable size="small" />
                </el-form-item> -->
                <!-- <el-form-item label="提交时间：" prop="key_range" style="margin-right:25px;">
                    <el-date-picker v-model="queryParams.key_range" type="daterange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" placeholder="请选择提交时间范围" />
                </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    <!-- <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport"
                        v-hasPermi="['customer:manage:export']">导出
                    </el-button> -->
                </el-form-item>
            </el-form>
            <el-row :gutter="10" class="mb8">
                <!-- <el-col :span="22">
                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="title='新增';handleShow='add'" v-hasPermi="['user:depart:add']">
                        新增</el-button>
                </el-col> -->
                <!-- <el-col :span="22">
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleBulk"
                        v-hasPermi="['customer:manage:add']">
                        批量修改</el-button>
                </el-col> -->
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
            </el-row>
            <el-table border v-loading="loading" :data="tableList" ref="tableList" v-tableHeight
                :height="tableList.length > 0 ? '900px' : '120px'" @selection-change="handleSelectionChange"
                @row-click="toggleSelection">
                <!-- <el-table-column type="selection" width="55" align="center" /> -->
                <el-table-column label="订单编号" align="center" prop="order_no" />
                <el-table-column label="服务名称" align="center" prop="name" />
                <el-table-column label="服务封面" align="center" prop="cover_pict">
                    <template slot-scope="scope">
                        <div v-if="scope.row.cover_pict" class="img-list">
                            <el-image style="width: 50px; height: 50px;border:1px solid #eee;"
                                :src="scope.row.cover_pict" :preview-src-list="[scope.row.cover_pict]">
                            </el-image>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="服务分类" align="center" prop="cate_name" />
                <el-table-column label="服务时间" align="center" prop="service_time" />
                <el-table-column label="服务时长" align="center" prop="service_duration" />
                <el-table-column label="订单价格" align="center" prop="order_price" />
                <!-- <el-table-column label="支付方式" align="center" prop="pay_way" />
                <el-table-column label="订单来源" align="center" prop="source" /> -->
                <el-table-column label="创建时间" align="center" prop="order_create_time" />
                <el-table-column label="订单状态" align="center" prop="order_state">
                    <template slot-scope="scope">
                        <span>
                            {{ selectDictLabel(statusList, scope.row.order_state) }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-document" @click="handleDetail(scope.row)"
                            v-hasPermi="['user:depart:edit']">
                            查看订单
                        </el-button>
                        <el-button v-if="scope.row.order_state == 0" size="mini" type="text" icon="el-icon-document"
                            @click="handleAssign(scope.row)" v-hasPermi="['user:depart:edit']">
                            指派员工
                        </el-button>
                        <!-- <el-button v-if="scope.row.order_state == 0" icon="el-icon-circle-close" size="mini" type="text"
                            @click="handleCancel(scope.row)" v-hasPermi="['user:depart:start']">取消订单
                        </el-button> -->
                        <!-- <el-button v-if="scope.row.status == 0" size="mini" type="text" icon="el-icon-delete"
                            v-hasPermi="['user:depart:stop']">订单跟踪
                        </el-button> -->
                        <el-button v-if="scope.row.order_state == 1" size="mini" type="text"
                            @click="handleComplete(scope.row)" v-hasPermi="['user:depart:del']">
                            完成订单</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="pageCount > 0" :pageCount="pageCount" :page.sync="queryParams.page"
                :limit.sync="queryParams.limit" @pagination="getList" />
        </div>
        <complete v-if="handleShow == 'complete'" :handleShow="handleShow" :orderNo="orderNo" @close="handleShow = ''"
            @load="getList" />
        <el-dialog :title="title" visible v-if="handleShow == 'detail'" @close="close()" width="65%" append-to-body
            :close-on-click-modal="false">
            <el-form ref="form" :model="form" label-width="100px" label-position="left" style="margin-left: 30px;" border>
                <el-row>
                    <el-col :span="24">
                        <div style="font-size: larger;margin-bottom: 30px;">
                            <span>订单信息</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="order_no" label="订单编号">
                            <span>{{ form.order_no }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="order_state_name" label="订单状态">
                            <span>{{ form.order_state_name }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="order_price" label="订单价格">
                            <span>{{ form.order_price }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="disc_price" label="优惠价格">{{ form.disc_price }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="pay_price" label="最后支付价格">
                            <span>{{ form.pay_price }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="pay_type_name" label="支付方式">
                            <span>{{ form.pay_type_name }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="pay_success_time" label="支付成功时间">
                            <span>{{ form.pay_success_time }}</span>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24" v-if="form.order_state == 2">
                        <el-form-item prop="complete_images" label="完成图片">
                            <el-image v-for="url in form.complete_images" :key="url"
                                style="width: 150px; height: 150px;border:1px solid #eee;margin-right: 10px;" :src="url"
                                :preview-src-list="[url]">
                            </el-image>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="form.order_state == 2">
                        <el-form-item prop="complete_notes" label="完成备注">
                            <span>{{ form.complete_notes }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="form.order_state == -1">
                        <el-form-item prop="cancel_reason" label="取消原因">
                            <span>{{ form.cancel_reason }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="form.order_state == -1">
                        <el-form-item prop="cancel_time" label="取消时间">
                            <span>{{ form.cancel_time }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-divider />
                    </el-col>
                    <el-col :span="24">
                        <div style="font-size: larger;margin-bottom: 30px;">
                            <span>服务信息</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="address_name" label="下单人姓名">
                            <span>{{ form.address_name }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="service_sex_name" label="下单人性别">
                            <span>{{ form.service_sex_name }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="address_mobile" label="下单人电话">
                            <span>{{ form.address_mobile }}</span>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item prop="oservice_code" label="服务码">
                            <span>{{ form.service_code }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="service_time" label="服务开始时间">
                            <span>{{ form.service_time }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="service_tips" label="服务备注">
                            <span>{{ form.service_tips }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="address" label="下单人地址">
                            <span>{{ form.address_province }}{{ form.address_city }}{{ form.address_area }}{{
                                form.address_detailed }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="form.order_state == 2 || form.order_state == 1">
                        <el-divider />
                    </el-col>
                    <el-col :span="24" v-if="form.order_state == 2 || form.order_state == 1">
                        <div style="font-size: larger;margin-bottom: 30px;">
                            <span>分派第三方信息</span>
                        </div>
                    </el-col>
                    <el-col :span="12" v-if="form.order_state == 2 || form.order_state == 1">
                        <el-form-item prop="receiv_staff_name" label="第三方名称">
                            <span>{{ form.receiv_staff_name }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="form.order_state == 2 || form.order_state == 1">
                        <el-form-item prop="receiv_time" label="分派时间">
                            <span>{{ form.receiv_time }}</span>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="close()">确定</el-button>
                <!-- <el-button type="primary" @click="submit" :disabled="formLoading">确 定</el-button> -->
            </span>
        </el-dialog>
        <el-dialog :title="title" visible v-if="handleShow == 'assign'" @close="close()" width="45%" append-to-body
            :close-on-click-modal="false">
            <el-form ref="form1" :model="form1" :rules="rules1" label-width="80px" v-loading="formLoading">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="指派员工" prop="staff_id" label-width="100px">
                            <el-select v-model="form1.staff_id" placeholder="请输入选择" clearable size="small">
                                <el-option v-for="dict in partnerList" :key="dict.id" :label="dict.name" :value="dict.id" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close()">取 消</el-button>
                <el-button type="primary" @click="submit" :disabled="formLoading">确 定</el-button>
            </span>

        </el-dialog>
    </div>
</template>
<script>
import { getServiceOrderLists, getServiceOrderInfo, setAssignStaff, setServiceOrderComplete, getServiceOrderStaffLists } from "@/api/order/order.js"
import complete from "./handle/complete"
import { orderStatus } from "@/api/dictionary"

import throttle from 'lodash.throttle'
export default {
    name: 'order',
    components: {
        complete
    },
    props: {

    },
    data() {
        return {
            showSearch: true,
            loading: false,
            pageCount: 0,
            total: 0,
            orderNum: 0,
            queryParams: {
                page: 1,
                limit: 20,
                type: '',
            },
            tableList: [],
            statusList: orderStatus,
            handleShow: "",
            formLoading: false,
            form: {
                id: null,
                name: null,
            },
            // rules: {
            //     name: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
            // },
            form1: {
                order_no: '',
                staff_id: ''
            },
            rules1: {
                staff_id: [{ required: true, message: '请选择指派员工', trigger: 'blur' }],
            },
            title: "",
            size: 'mini',
            curLine: 0,
            btnList: [
                {
                    dictLabel: '全部订单',
                    dictValue: ''
                },
                {
                    dictLabel: '未接单',
                    dictValue: 0
                },
                {
                    dictLabel: '已接单',
                    dictValue: 1
                },
                {
                    dictLabel: '已完成',
                    dictValue: 2
                },
                {
                    dictLabel: '已取消',
                    dictValue: -1
                }
            ],
        }
    },
    created() {
        this.getList()
        this.getPartnerLists()
    },
    methods: {
        getList() {
            this.loading = true;
            getServiceOrderLists(this.queryParams).then(res => {
                this.tableList = res.data.lists;
                this.pageCount = res.data.pageCount;
                this.loading = false;
            });
        },
        getPartnerLists() {
            getServiceOrderStaffLists().then(res => {
                this.partnerList = res.data;
            });
        },
        changeTab(item, index) {
            this.curLine = index
            this.queryParams.type = item.dictValue
            this.getList()
        },
        handleQuery() {
            this.queryParams.page = 1;
            this.getList();
        },
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        toggleSelection(row) {
            this.$refs.tableList.toggleRowSelection(row);
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.selectData = selection;
        },
        handleBulk(ids) {
            this.$confirm('是否确认批量修改?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return delSector({ id: row.id });
            }).then(() => {
                this.getList();
                this.msgSuccess("修改成功");
            })
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = this.queryParams;
            this.$confirm('是否确认导出所有数据项?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(function () {
                // return exportBanner(queryParams);
            }).then((response) => {
                // this.download(response.msg);
            });
        },
        close() {
            this.form = {}
            this.handleShow = ""
        },
        handleAssign(row) {
            this.title = '指派员工';
            this.form1.order_no = row.order_no;
            console.log(this.form1.order_no, 'dingdan')
            this.handleShow = 'assign'
        },
        handleDetail(row) {
            this.title = '订单详情';
            // this.form = JSON.parse(JSON.stringify(scope.row));
            this.handleShow = 'detail';
            getServiceOrderInfo({ order_no: row.order_no }).then(res => {
                console.log(res, 'dingdanxiangqing')
                this.form = res.data
            })
        },
        handleCancel(row) {
            this.$confirm(`是否将“${row.name}”订单取消?`, "确认提醒", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return setSectorStatus({ order_no: row.order_no });
            }).then(() => {
                this.getList();
                this.msgSuccess(`${label}成功`);
            })
        },
        handleComplete(row) {
            this.handleShow = 'complete';
            this.orderNo = row.order_no
            // this.$confirm('是否确认完成' + '"' + row.name + '"' + '?', "确认提醒", {
            //     confirmButtonText: "确定",
            //     cancelButtonText: "取消",
            //     type: "warning"
            // }).then(function () {
            //     return setServiceOrderComplete({ order_no: row.order_no });
            // }).then(() => {
            //     this.getList();
            //     this.msgSuccess("订单已完成");
            // })
        },

        submit: throttle(function () {
            this.$refs.form1.validate((valid) => {
                if (valid) {
                    this.formLoading = true;
                    let params = {
                        staff_id: this.form1.staff_id,
                        order_no: this.form1.order_no
                    }
                    setAssignStaff(params).then(res => {
                        this.msgSuccess("操作成功！");
                        this.close()
                        this.formLoading = false;
                        this.getList();
                    }).catch(() => {
                        this.formLoading = false;
                    })
                }
            })
        }, 1000, { trailing: false }),

    }
}
</script>

<style lang='scss' scoped>
.decs {

    /deep/.el-descriptions--mini.is-bordered .el-descriptions-item__cell {
        padding: 0 10px;
    }

    /deep/.el-descriptions-item__cell {
        padding-left: 8px;
        font-size: 14px;
    }

    /deep/ .el-col {
        margin: 0px;
        padding: 0px;
        height: 30px;
        line-height: 30px;
    }

    /deep/.el-form-item__error {
        top: 21%;
        right: 5% !important;
        left: unset;
    }
}

.p {
    font-size: 14px;
}
</style>
